<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>添加供应商 - ${provider.name }</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<link rel="stylesheet" href="admin/css/common.css" type="text/css" />
	<link rel="stylesheet" href="admin/css/provider.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
	<script type="text/javascript" src="admin/js/mulselect.js"></script>
	
	<script type="text/javascript">
		//判断是否为空
		function check(){
			$('#selectedStones').val("0");
			var sel = document.getElementById('selStones');
			var s = ""
			if((sel).options.length == 0){
				alert("请至少选择一个石材");
				return false;
			}else{
				for(var i=0; i < sel.options.length; i++){
					if(sel.options[i]) s += sel.options[i].value + ";";
				}
				s = s.substr(0,s.length-1);
				$('#selectedStones').val(s);
			}
		//	alert($('#selectedStones').val());
		}

		function loadStone(obj){
			var pageno = parseInt($('#pageNo').val());
			if( obj == 'left'){
				if(pageno == 1){
				}else{
					$('#pageNo').val(pageno -1);
				}
			}else if(obj == 'right'){
				$('#pageNo').val(pageno +1);
			}else{
				$('#pageNo').val(1);
			}
			var param ={ pageno: parseInt($('#pageNo').val()) ,
					 pagesize:50,
					 stoneName: $('#stoneName').val()	};
			jQuery.post("adminj/findStoneListAjax.action",param,callbackFunc,"json");
		}

		function callbackFunc(data){
			var temp = "";
			temp += '<select  class="sel" multiple="multiple" size="20" name="allStones" id="allStones" ondblclick="move(this.form.allStones,this.form.selStones)">';
			for(i=0 ; i < data.listSize;i++ ){
				temp += '<option value="'+data.list[i].id+'">';
				temp += data.list[i].chineseName;
				temp += '</option>';
			}
			temp += '</select>';
			$('#allStonesDiv').html(temp);
			if(data.page.currentPage == 1 || data.page.totalPages == 1){
				$('#leftBtn').hide();
			}else{
				$('#leftBtn').show();
			}
			if(data.page.totalPages == 1 || data.page.currentPage == data.page.totalPages ){
				$('#rightBtn').hide();
			}else{
				$('#rightBtn').show();
			}
		}
		
	</script>
  </head>
  <body>
  	<div id="provider_zone">
  	  <form action="provider/setProviderStones.action" name="providerForm" method="post" onsubmit="return check();">
	  	 <table width="80%" border="0" align="center"  cellpadding="3" cellspacing="1" class="table_style">
		    <tr class="head">
		    	<th width="260px">可供选择的石材</th>
		    	<th width="100px">操作</th>
		    	<th width="260px">供应商所有石材具体情况</th>
		    </tr>
		    <tr>
		      <td style="text-align: center;">
		      
		     	 <input type="text" class="search-input" value="${stoneName }" name="stoneName" id="stoneName" onkeyup="loadStone()" title="输入石材名字搜索关键字" />
		      	 <br/>
		      	 第<input type="text" value="1" name="pageNo" id="pageNo" size="1"  style="text-align: center;"/>页
		      	<input type="button" value="上一页" onclick="loadStone('left');" id="leftBtn"/> 
		      	<input type="button" value="下一页" onclick="loadStone('right');"  id="rightBtn"/>
			      	<div id="allStonesDiv">
						<select  class="sel" multiple="multiple" size="20" name="allStones" id="allStones" 
							ondblclick="move(this.form.allStones,this.form.selStones)">
							<c:forEach items="${stonesList }" var="stoneItem">
								<option value="${stoneItem.id }">
									${stoneItem.chineseName }
								</option>
							</c:forEach>
						</select>	
					</div>
		      </td>
		      <td style="text-align: center; background-color: #ffffff;">
		     	<input type="button" class="btn" value="全部右移" onclick="moveall(this.form.allStones,this.form.selStones)" name="B1">
		      	<p></p>
		      	<input type="button" class="btn" value="选中右移" onclick="move(this.form.allStones,this.form.selStones)" name="B2">
				<p></p>
				<input type="button" class="btn" value="选中左移" onclick="move(this.form.selStones,this.form.allStones)" name="B3">
				<p></p>
				<input type="button" class="btn" value="全部左移" onclick="moveall(this.form.selStones,this.form.allStones)" name="B4">
		      </td>
		      <td style="text-align: center;">
		      	<select class="sel" multiple="multiple" size="20" name="selStones" id="selStones" 
		      		 ondblclick="move(this.form.selStones,this.form.allStones)">
		      		
		      	</select>	
		      	<input type="hidden" id="selectedStones" name="selectedStones" />
		      </td>
		    </tr>
		    <tr>
		    	<td  colspan="3" class="left_title_2">
					<input type="submit" class="input-submit" value="保存，下一步">
					<input type="hidden" value="${providerId}" name="providerId" />
				</td>
		    </tr>
		  </table>
	  </form>
	</div>
  </body>
  <script type="text/javascript">
  	SortD(document.getElementById('allStones'));
  	SortD(document.getElementById('selStones'));
  </script>
</html>
